import  React, { useEffect, useState } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'

// 属性id
type DATA_ITEM = {
  id: string,
  label: string,
  value: string
}
// 属性数据类型
type TYPE_ITEM ={
  data: DATA_ITEM[],
  type: string,
  label: string,
  value: string
}
// 样式数据类型
type STYLE_CHILD = {
  cmpBackground: VALUE,
  height: VALUE,
  lineColor: VALUE,
  lineHeight: VALUE,
  pagePadding: VALUE,
  type: TYPE_ITEM

}
type STYLE = {
  label: string,
  type: string,
  child: STYLE_CHILD
}
// 值的数据类型
type VALUE = {
  label: string,
  type: string,
  value: string | number
}

interface Props {
  styles: STYLE;
};

// 做一个数据个映射
const styleTable = {
  height: "height",
  lineColor: "lineColor",
  cmpBackground: "backgroundColor",
  pagePadding: "padding",
  lineHeight: "lineHeight",
  type: "type"
}

const HeDivider = (props: Props) => {
  const {styles} = props;
  const [comStyle, setComStyle] = useState({});
  const [inerStyle, setInerStylee] = useState({});


  const handleStyle = (child, model) => {
    let obj = {}; //处理外部view的样式
    let obj2 = {};  //处理内部view的样式
    for (let key in child) {
      const element = child[key];
      if(key == 'cmpBackground') {
        obj[styleTable[key]] = element.value;
      }
      else if(key == 'height'  ) {
        obj[styleTable[key]] = element.value + 'px'
      }
      else if( key == 'pagePadding' ) {
        obj["paddingLeft"] = element.value + 'px'
        obj["paddingRight"] = element.value + 'px'
      }
      else if( key == 'lineColor' ) {
        obj2["borderTopColor"] =  element.value
      }
      else if( key == 'lineHeight' ) {
        obj2["borderTopWidth"] =  element.value + 'px'
      }
      else if(key == 'type') {
        obj2["borderStyle"] =  element.value
      }
      
    }
    return {obj, obj2};
  }

  useEffect(() => {
    let {obj, obj2} = handleStyle(styles?.child, {});
    setComStyle(obj)
    setInerStylee(obj2)
  }, [styles]);

  return (
    <View style={comStyle} className='divider-box'>
      <View style={inerStyle} className='divider'></View>
    </View>
  )
}

export default HeDivider;